<template>
  <slot :viewImg="viewImg">
    <div
      class="tac ant-image p-image cp"
      v-bind="$attrs"
      :style="{
        height: props.height
      }"
    >
      <img
        v-if="src"
        @click="viewImg"
        alt=""
        srcset=""
        loading="lazy"
        v-lazyLoad="src"
        :data-compress="props.isCompress"
        :data-w="props.w"
      />
      <img v-else src="@/assets/img/no-picture.png" alt="" srcset="" />
    </div>
  </slot>
</template>
<script setup>
import { ref, watch } from 'vue'
import previewGroup from '@/components/previewGroup'
import { createGlobalComponent } from './createComponent.js'
const props = defineProps({
  height: {
    type: [Number, String],
    default: null
  },
  isCompress: {
    type: Number,
    default: 1
  },
  w: {
    type: Number,
    default: 170
  },
  src: {
    type: String,
    default: ''
  },
  listSrc: {
    type: Array,
    default: () => {
      return []
    }
  },
  trigger: {
    type: String,
    default: 'click'
  },
  previewCompress: {
    type: Boolean,
    default: true
  },
  tag: {
    type: String,
    default: ''
  },
  tagList: {
    type: Array,
    default: () => {
      return []
    }
  }
})
const src = ref(props.src || (props.listSrc && props.listSrc[0]))
const tag = ref(props.tag || (props.tagList && props.tagList[0]))
const domRoot = ref(null)

const viewImg = () => {
  if (!src.value) {
    return false
  }
  domRoot.value = createGlobalComponent(previewGroup, {
    visible: true,
    listSrc: props.listSrc,
    src: src.value,
    className: 'previewGroup',
    previewCompress: props.previewCompress,
    tag: tag.value,
    tagList: props.tagList,
    close: () => {
      domRoot.value.remove()
      domRoot.value = null
    }
  })
}

watch(
  [() => props.listSrc, () => props.src],
  () => {
    src.value = props.src || (props.listSrc && props.listSrc[0])
    // tag.value = props.tag || (props.tagList && props.tagList[0])
  },
  {
    deep: true
  }
)
</script>
<style lang="scss" scoped>
.p-image {
  max-height: 100%;
  max-width: 100%;
}
.lazyload {
  width: 30px;
  height: 30px;
  position: relative;
  top: 35%;
}
</style>
